import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard'
import LikesButton from './components/LikesButton'
import DigitalClock from './components/DigitalClock'
import CommentBox from './components/CommentBox'
import CommentList from './components/CommentList'
import ThemedBar from './components/ThemedBar'
import ThemeContext from './theme-context'

const tags = ['恐龙', '霸王龙', '项少龙']
const themes = {
    light: {
        classnames: 'btn btn-primary',
        bgColor: '#eeeeee',
        color: '#000'
    },
    dark: {
        classnames: 'btn btn-light',
        bgColor: '#222222',
        color: '#fff'
    }
}

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            comments: ['this is my first reply'],
            theme: 'light'
        }
        this.addComment = this.addComment.bind(this)
        this.changeTheme = this.changeTheme.bind(this)
    }

    changeTheme(theme) {
        this.setState({
            theme:theme
        })

    }

    addComment(comment) {
        this.setState({
            comments: [...this.state.comments, comment]
        })
    }

    render() {
        const {comments} = this.state
        return (
            <ThemeContext.Provider value={themes[this.state.theme]}>
                <div className="App">

                    <header className="App-header">
                        <img src={logo} className="App-logo" alt="logo"/>
                        <p>
                            Edit <code>src/App.js</code> and save to reload.
                        </p>
                        <a
                            className="App-link"
                            href="https://reactjs.org"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            Learn React
                        </a>
                    </header>
                    <a href="#theme-switcher" className="btn btn-light"
                       onClick={() => {
                           this.changeTheme('light')
                       }}
                    >
                        浅色主题
                    </a>
                    <a href="#theme-switcher" className="btn btn-secondary"
                       onClick={() => {
                           this.changeTheme('dark')
                       }}
                    >
                        深色主题
                    </a>
                    <ThemedBar/>
                    <LikesButton/>
                    <DigitalClock/>
                    <CommentList comments={comments}/>
                    <CommentBox
                        commentsLength={comments.length}
                        onAddComment={this.addComment}
                    />
                    <NameCard name='ceshi' number={1234567890} isHuman tags={tags}/>
                </div>
            </ThemeContext.Provider>
        );
    }
}

export default App;
